<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/common/jsp/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>SQL生成器</title>
    <%@ include file="/common/jsp/jscss.jsp" %>
    <script type="text/javascript">
        $(function () {
            changeIframeUrl("/sillyhat/admin/sqlcreated/queryDatabaseList");
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // 获取已激活的标签页的名称
                var activeTab = $(e.target).text();
                // 获取前一个激活的标签页的名称
                var previousTab = $(e.relatedTarget).text();
                $(".active-tab span").html(activeTab);
                $(".previous-tab span").html(previousTab);
                changeIframeUrl(e.target.id)
                e.preventDefault();//阻止a标签的默认行为
            });
        });

        function changeIframeUrl(pageIframeId) {
            $("#iframeSqlPageId").attr("src", "${ctx}" + pageIframeId);
        }
    </script>
</head>
<body>
<div class="row">
    <div class="col-md-2">
        <ul class="nav nav-pills nav-stacked" role="tablist">
            <li class="active">
                <a href="#" id="/sillyhat/admin/sqlcreated/queryDatabaseList" data-toggle="tab">数据库定义</a>
            </li>
            <li><a href="#" id="/sillyhat/admin/sqlcreated/toSqlCreatedPanel" data-toggle="tab">SQL生成</a></li>
            <li><a href="#" id="/sillyhat/admin/sqlcreated/message" data-toggle="tab">Messages</a></li>
        </ul>
    </div>
    <div class="col-md-10 main">
        <div class="container-fluid embed-responsive embed-responsive-16by9">
            <iframe id="iframeSqlPageId" class="embed-responsive-item" src=""></iframe>
        </div>
    </div>
</div>
</body>
</html>
